<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="${staticServerAddress }/title.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<title>微风网购物车</title>
</head>
<body>
	<!-- 顶部tab -->
	<div class="tab-header">
		<div class="inner">
			<div class="pull-left">
				<div class="pull-left">嗨，${user.userEmail }欢迎来到<span class="cr">微风网</span></div>
				<a href="toAgentleavel">网店代销</a>
				<a href="toBreezeArticle4">帮助中心</a>
			</div>
			<div class="pull-right">
				<a href="toBreezeWelcome">我的微风</a>
				<a href="lineItem">我的订单</a>
				<a href="toBreezeIntegral">积分平台</a>
			</div>
		</div>
	</div>
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="home"><img src="images/icons/logo.jpg" alt="微风网" class="cover"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<c:if test="${bzProducte==null||bzProducte.size()==0}">
							你还没有添加任何的商品。快去添加吧！
				</c:if>
				 <c:if test="${bzProducte!=null&&bzProducte.size()!=0}"> 
				<div class="title">购物车</div>
				<form action="toCreateOrder" method="post" class="shopcart-form__box" id="target1">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th width="150">
									<label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
								</th>
								<th width="300">商品信息</th>
								<th width="150">单价</th>
								<th width="200">数量</th>
								<th width="200">总价</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<tbody>
						
						
							 <c:forEach  items="${bzProducte }" var="b">
								<tr>
								<th scope="row">
									<label class="checked-label"><input name="checkbox" type="checkbox"><i></i>
									<input type="hidden" name="productId" disabled value="${b.productId}">
										<div class="img"><img src="${staticServerAddress }${b.bookMainImg }" alt="" class="cover"></div>
									</label>
								</th>
								<td>
									<div class="name ep3 productName">${b.productName }</div>
									<div class="name ep3">简介：${b.bookIntroduction } </div>
									<div class="type c9">作者：${b.bookAuthor }  出版社：${b.bookPublisher }</div>
								</td>
								<td>¥<span class="now_price">${b.productPrice }</span></td>
								<td>
									<div class="cart-num__box">
										<input type="button" class="sub" value="-">
										<input type="text" class="val" disabled name="scProductNum" value="${b.scProductNum }" maxlength="2">
										<input type="button" class="add" value="+">
									</div>
								</td>
								<td>¥<span class="total_price">${b.productPrice*b.scProductNum }</span></td>
								<td>
									<a href="#" class="addFavorite">添加到收藏夹</a>
									<br>
									<a href="#" class="delete">删除</a>
								</td>
							</tr>
							</c:forEach>							
						</tbody>
					</table>
				
					<div class="user-form-group tags-box shopcart-submit pull-right">
						<button type="submit" id="submit" class="btn">提交订单</button>
					</div>
					<div class="checkbox shopcart-total">
						<label><input type="checkbox" class="check-all"><i></i> 全选</label>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a  class="deletePlural">删除</a>
						<div class="pull-right">
							已选商品 <span class="itemNum">0</span> 件
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计（不含运费）
							<b class="cr">¥<span class="fz24">00.00</span></b>
						</div>
					</div>
					<script>
						$(document).ready(function(){
							var itemCheckboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
								checkAll = $('.check-all'),
								totalMoney = $('.fz24'),
								itemNum=$('.itemNum'),
								deleteone=$('.delete'),
								deletPlural=$('.deletPlural'),
								list=$(".total_price"),
								addFavorite=$(".addFavorite"),
								sub=$('.sub');
							// 全选
							checkAll.on('change', function() {
								checkAll.prop('checked', $(this).prop('checked'));
								itemCheckboxs.prop('checked', $(this).prop('checked'));

							});
							checkAll.click(function(){
								var isGouxuan=$(this).prop('checked');
								var productId=$("[name=productId]");
								var scProductNum=$("[name=scProductNum]");
								if(isGouxuan){
									var num=0;
									for (var i = 0; i < list.length; i++) {
										num+=Number(list[i].innerHTML);									
									}
									productId.removeAttr("disabled")
									scProductNum.removeAttr("disabled")
									itemNum.text(i);
									totalMoney.text(num);
									
								}else{
									productId.attr("disabled","disabled")
									scProductNum.attr("disabled","disabled")
									itemNum.text(0);
									totalMoney.text(0);
								}
							});
							// 点击选择
							itemCheckboxs.on('change', function() {
								var flag = true;
								itemCheckboxs.each(function() {
									if (!$(this).prop('checked')) { flag = false }	
								});
								checkAll.prop('checked', flag);
							});
							// 个数限制输入数字
							$('input.val').onlyReg({reg: /[^0-9.]/g});
							// 加减个数
							$('.cart-num__box').on('click', '.sub,.add', function() {
								var value = parseInt($(this).siblings('.val').val());
								var nowPrice = $(this).parent().parent().parent().find('.now_price').text();
								var totalPrice=$(this).parent().parent().parent().find('.total_price');
								var isGouxuan =$(this).parent().parent().parent().find('[type=checkbox]').prop('checked');
								var productId = $(this).parent().parent().parent().find("[name=productId]");
								var scProductNum=$(this).parent().parent().parent().find("[name=scProductNum]");
								if ($(this).hasClass('add')) {
									$(this).siblings('.val').val(Math.min((value += 1),99));
									totalPrice.text(nowPrice*value);
									scProductNum=$(this).parent().parent().parent().find("[name=scProductNum]");
									if (isGouxuan) {
											totalMoney.text(Number(totalMoney.text())+Number(nowPrice));
									}
								} else {
									$(this).siblings('.val').val(Math.max((value -= 1),1));
									totalPrice.text(nowPrice*value==0?nowPrice:nowPrice*value);
									scProductNum=$(this).parent().parent().parent().find("[name=scProductNum]");
									if (isGouxuan) {
										if(nowPrice==totalPrice.text()){
											totalMoney.text(Number(totalMoney.text()));
										}else{
											totalMoney.text(Number(totalMoney.text())-Number(nowPrice));
										}
									}
								}
								/*  $.ajax("updateShoppcart",{
									dataType:"json",
									data:{"productId":productId,"scProductNum":scProductNum},
									type:"post",
									success:function(result){
									},
									error:function(xhr,e){
										console.error(e);
									}
								}); */
							});
							//修改商品种类数量以及价格
							itemCheckboxs.click(function(){
								var totalPrice=$(this).parent().parent().parent().find('.total_price').text();
								var productId = $(this).parent().parent().parent().find("[name=productId]");
								var scProductNum=$(this).parent().parent().parent().find("[name=scProductNum]");
								var isGouxuan=$(this).prop('checked');
								if(isGouxuan){
									productId.removeAttr("disabled")
									scProductNum.removeAttr("disabled")
									itemNum.text(Number(itemNum.text())+1)								
									totalMoney.text(Number(totalMoney.text())+Number(totalPrice))
								}else{
									productId.attr("disabled","disabled")
									scProductNum.attr("disabled","disabled")
									itemNum.text(Number(itemNum.text())-1)								
									totalMoney.text(Number(totalMoney.text())-Number(totalPrice))
								}
							});
							//删除一条商品
							deleteone.click(function(){
								var totalPrice=$(this).parent().parent().find('.total_price').text();
								var isGouxuan =$(this).parent().parent().find('[type=checkbox]').prop('checked');
								var productId = $(this).parent().parent().find("[name=productId]").val();
								if(isGouxuan){
									itemNum.text(Number(itemNum.text())-1)								
									totalMoney.text(Number(totalMoney.text())-Number(totalPrice))
								}
								$(this).parent().parent().detach();
								//删除购物车
								$.ajax("deletShopcart",{
									dataType:"json",
									data:{"productId":productId},
									type:"post",
									success:function(result){
									},
									error:function(xhr,e){
										console.error(e);
									}
								});
								
							});
							//删除选中的商品
							deletPlural.click(function(){
								var	itemCheckboxsChecked =  $('[name=checkbox]:checked');
								for (var i = 0; i < itemCheckboxsChecked.length; i++) {	
										var productId=itemCheckboxsChecked.eq(i).parent().find("[name=productId]").val();
										var totalPrice=itemCheckboxsChecked.eq(i).parent().parent().parent().find('.total_price').text();										
										itemNum.text(Number(itemNum.text())-1)										
										totalMoney.text(Number(totalMoney.text())-Number(totalPrice))
										itemCheckboxsChecked.parent().parent().parent().detach();
										//删除购物车
										$.ajax("deletShopcart",{
											dataType:"json",
											data:{"productId":productId},
											type:"post",
											success:function(result){
											},
											error:function(xhr,e){
												console.error(e);
											}
										});
								}
							});
							addFavorite.click(function(){
								var productId = $(this).parent().parent().find("[name=productId]").val();
								//添加到收藏夹
								$.ajax("addFavorite",{
									dataType:"json",
									data:{"productId":productId},
									type:"post",
									success:function(result){
									},
									error:function(xhr,e){
										console.error(e);
									}
								});
							});
					
						});
					</script>
				</form>
			 </c:if>
			</div>
		</section>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item">
				<a href="toBreezeWelcome" class="r-item-hd">
					<i class="iconfont icon-user" ></i>
					<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="toBreezeShopcart" class="r-item-hd">
					<i class="iconfont icon-cart" data-badge="${shoppingCartNum==null?0:shoppingCartNum }"></i>
					<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="toFavorite?pageIdx=1" class="r-item-hd">
					<i class="iconfont icon-aixin"></i>
					<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="#" class="r-item-hd">
					<i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="toIssues" class="r-item-hd">
					<i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
				</a>
			</li>
			<li class="r-toolbar-item to-top">
				<i class="iconfont icon-top"></i>
				<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
			</li>
		</ul>
		<script>
			$(document).ready(function(){ $('.to-top').toTop({position:false}) });
		</script>
	</div>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>微风网</dt>
				<a href="toBreezeArticle10"><dd>企业简介</dd></a>
				<a href="toBreezeArticle11"><dd>加入微风</dd></a>
				<a href="toBreezeArticle12"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="toBreezeArticle1"><dd>售后服务</dd></a>
				<a href="toBreezeArticle2"><dd>配送服务</dd></a>
				<a href="toBreezeArticle3"><dd>用户协议</dd></a>
				<a href="toBreezeArticle4"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="toBreezeArticle5"><dd>如何成为代理商</dd></a>
				<a href="toBreezeArticle6"><dd>代销商上架教程</dd></a>
				<a href="toBreezeArticle7"><dd>分销商常见问题</dd></a>
				<a href="toBreezeArticle8"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="toAgentLevel"><li>网店代销</li></a>
				<a href="toClassRoom"><li>微风学堂</li></a>
				<a href="toBreezeAbout"><li>联系我们</li></a>
				<a href="toBreezeArticle10"><li>企业简介</li></a>
				<a href="toBreezeArticle5"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2018-2020 微风网 版权所有，并保留所有权利<br>
				ICP备案证书号：渝ICP备20181806号-2&nbsp;&nbsp;&nbsp;&nbsp;重庆市沙坪坝区微电子产业园区&nbsp;&nbsp;&nbsp;&nbsp;Tel: 15881909100&nbsp;&nbsp;&nbsp;&nbsp;E-mail: 15881909100@qq.com
			</p>
		</div>
	</div>
</body>
</html>